.user-overview-wrapper {
  position: relative;
  background-color: $colorBeige;
}

.small-title {
  font-family: $notoSans;
  font-size: 12px;
  color: $colorDark;
}

.background {
  z-index: zindex($zLayout, behind);
  position: absolute;
  top: 0;
  left: 0;
  &-image {
    @include size(375px, 201px);
  }
}

.content {
  position: relative;
  z-index: zindex($zLayout, default);
  padding: 0 $margin;

  display: grid;
  grid-template-columns: 1fr;
  // Rows set from calculation in typescript-file

  grid-template-areas:
    "welcome"
    "collected"
    "events"
    "links";

  .welcome {
    grid-area: welcome;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
    margin-top: 20px;

    .name-wrapper {
      display: inline-flex;
      align-items: center;
    }

    .name {
      font-size: $heading-l;
      line-height: 1.2;
      max-width: 140px;
      // Really not more space on some devices - otherwise may make QR-button non-visible
      @include truncate(1);
    }

    .edit-button {
      padding: 10px;
      margin-bottom: -10px;
    }
    .edit-icon {
      @include size(25px);
    }

    .qr-button {
      display: flex;
      align-items: center;
      padding: 4px 30px 4px 0;

      &.hidden {
        visibility: hidden;
        pointer-events: none;
      }
    }

    .qr-icon {
      @include size(24px);
      margin-right: 10px;
    }
  }

  .collected-items {
    grid-area: collected;
    display: flex;
    align-items: center;

    .item {
      position: relative;
      .item-button {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }

      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .item-icon-outline {
      @include size(65px);
      position: relative;
      border-radius: 50%;
      border: 1px solid $colorBeige;
      margin-bottom: 9px;
    }

    .item-count {
      @include size(23px);
      position: absolute;
      display: flex;
      top: -3px;
      right: -3px;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background-color: $colorViking;
      color: $colorWhite;
      line-height: 1;
      font-family: $notoSans;
      font-size: 12px;
    }

    .item-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      &.cart {
        @include size(28px);
      }
      &.gift {
        @include size(26px);
      }
      &.heart {
        @include size(21px);
      }
    }

    background-color: $colorLightBeige;
    margin: 5px 0;
    border-radius: 5px;
  }

  .events {
    grid-area: events;
    display: flex;
    gap: 8px;
    padding: 6px 0;

    .event-history-card {
      flex: 1;
      background-color: $colorLightBeige;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .event-history-count {
      display: flex;
      align-items: flex-end;
      margin: 0 0 21px 20px;

      .number {
        margin-right: 4px;
        font-size: 40px;
        line-height: 1;
        color: $colorViking;
      }
    }

    .event-history-title {
      font-family: $notoSans;
      font-size: 14px;
      width: 100%;
      color: $colorDark;
      text-align: center;
    }
  }

  .link-section {
    grid-area: links;
    display: flex;
    flex-direction: column;

    .order-listing {
      flex: 1;
      @include link-text($colorViking, false);
      display: flex;
      align-items: center;
      // Click area
      padding: 0 10px 16px 0;

      &-text {
        margin-right: 11px;
      }

      &-arrow {
        @include size(13px, 10px);
      }
    }

    .link-bordered-section {
      flex: 4;
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;

      .link-bordered-wrapper {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid $colorGrey;

        &:last-of-type {
          border-bottom: 1px solid $colorGrey;
        }
        .arrow {
          @include size(15px, 12px);
        }
      }
    }
  }
}
